<?php
/**
 * 链接
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
 ?>
<article class="post">
<h1 class="post-title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
<div class="post-content">
<?php $this->content(); ?>
<ul class="friend-links">
<?php Links_Plugin::output("SHOW_MIX"); ?>
</ul>
<style>
    /* links */
ul.friend-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin: 20px 0;
}

ul.friend-links li {
    flex: 0 0 calc(25% - 30px);
    max-width: calc(25% - 30px);
}

.post-pagination {
    margin:80px 0 50px
}

.friend-links li a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none !important;
}

<style>
    /* 友情链接基础样式 */
    ul.friend-links {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px 30px;
        margin: 20px 0;
    }

    ul.friend-links li {
        flex: 0 0 calc(25% - 30px);
        max-width: calc(25% - 30px);
        box-sizing: border-box;
    }

    /* 响应式布局 */
    @media (max-width: 992px) {
        ul.friend-links li {
            flex: 0 0 calc(33.33% - 30px);
            max-width: calc(33.33% - 30px);
        }
    }

    @media (max-width: 768px) {
        ul.friend-links {
            gap: 10px 15px;
        }
        ul.friend-links li {
            flex: 0 0 calc(50% - 15px);
            max-width: calc(50% - 15px);
        }
    }

    @media (max-width: 480px) {
        ul.friend-links li {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .friend-links li a {
            flex-direction: column;
            text-align: center;
        }
    }

    /* 链接元素样式 */
    .friend-links li a {
        display: flex;
        align-items: center;
        gap: 0.5em;
        text-decoration: none !important;
    }

    /* 分页样式 */
    .post-pagination {
        margin: 80px 0 50px;
    }

    /* 图片自适应 */
    .friend-links li a img {
        max-width: 100%;
        height: auto;
    }
</style>
</style>
</div>
</article>
<?php $this->need('comments.php'); ?>
</div>
<?php $this->need('footer.php'); ?>